<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>离线地图下载与处理中心</title>
    <!-- 引入MapLibre GL CSS -->
    <link href="https://unpkg.com/maplibre-gl@3.2.0/dist/maplibre-gl.css" rel="stylesheet" />
    <!-- 引入MapLibre GL JS -->
    <script src="https://unpkg.com/maplibre-gl@3.2.0/dist/maplibre-gl.js"></script>
    <!-- 引入Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#722ED1',
                        neutral: '#1F2937',
                        'neutral-light': '#F5F7FA',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .progress-ring-circle {
                transition: stroke-dashoffset 0.35s;
                transform: rotate(-90deg);
                transform-origin: 50% 50%;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .btn-hover {
                @apply transition-all duration-300 hover:shadow-lg transform hover:-translate-y-0.5;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-neutral min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fas fa-map-marked-alt text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-neutral">离线地图中心</h1>
            </div>
            <nav class="hidden md:flex items-center space-x-6">
                <a href="#download" class="text-gray-600 hover:text-primary transition-colors">下载地图</a>
                <a href="#process" class="text-gray-600 hover:text-primary transition-colors">预处理</a>
                <a href="#preview" class="text-gray-600 hover:text-primary transition-colors">地图预览</a>
                <a href="#guide" class="text-gray-600 hover:text-primary transition-colors">使用指南</a>
            </nav>
            <button class="md:hidden text-gray-600">
                <i class="fas fa-bars text-xl"></i>
            </button>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow">
        <!-- 英雄区 -->
        <section class="bg-gradient-to-r from-primary to-accent text-white py-16 md:py-24">
            <div class="container mx-auto px-4">
                <div class="max-w-3xl mx-auto text-center">
                    <h2 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-6 leading-tight">
                        离线地图解决方案
                    </h2>
                    <p class="text-lg md:text-xl opacity-90 mb-8">
                        下载全国地图数据，进行本地预处理，随时随地使用高精度离线地图
                    </p>
                    <div class="flex flex-col sm:flex-row justify-center gap-4">
                        <a href="#download" class="bg-white text-primary font-medium py-3 px-8 rounded-lg btn-hover">
                            <i class="fas fa-download mr-2"></i>开始下载
                        </a>
                        <a href="#guide" class="bg-transparent border-2 border-white text-white font-medium py-3 px-8 rounded-lg btn-hover">
                            <i class="fas fa-book mr-2"></i>查看指南
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 下载区域 -->
        <section id="download" class="py-16 bg-white">
            <div class="container mx-auto px-4">
                <div class="max-w-4xl mx-auto">
                    <div class="text-center mb-12">
                        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral mb-4">下载地图数据</h2>
                        <p class="text-gray-600 max-w-2xl mx-auto">
                            从官方源下载全国范围的OSM PBF格式地图数据，文件大小约2.8GB
                        </p>
                    </div>
                    
                    <div class="bg-neutral-light rounded-xl p-6 md:p-8 card-shadow">
                        <div class="flex flex-col md:flex-row items-start md:items-center gap-6 mb-6">
                            <div class="bg-primary/10 p-4 rounded-lg">
                                <i class="fas fa-file-download text-primary text-3xl"></i>
                            </div>
                            <div class="flex-grow">
                                <h3 class="text-xl font-semibold mb-2">中国全图OSM数据</h3>
                                <div class="flex flex-wrap gap-4 text-gray-600 mb-2">
                                    <div class="flex items-center">
                                        <i class="fas fa-hdd text-primary mr-2"></i>
                                        <span>约2.8 GB</span>
                                    </div>
                                    <div class="flex items-center">
                                        <i class="fas fa-calendar-alt text-primary mr-2"></i>
                                        <span>最近更新: 2023-06-15</span>
                                    </div>
                                    <div class="flex items-center">
                                        <i class="fas fa-file-code text-primary mr-2"></i>
                                        <span>格式: .osm.pbf</span>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-500">
                                    包含全国范围内的道路、建筑物、POI等地图数据，适用于离线导航和地图应用开发
                                </p>
                            </div>
                        </div>
                        
                        <div id="download-source-selection" class="mb-6">
                            <h4 class="font-medium mb-3 text-gray-700">下载源选择</h4>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                    <input type="radio" name="download-source" value="geofabrik" class="mr-3 text-primary" checked>
                                    <div>
                                        <span class="font-medium">Geofabrik</span>
                                        <p class="text-sm text-gray-500">官方开源地图数据镜像</p>
                                    </div>
                                </label>
                                <label class="flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
                                    <input type="radio" name="download-source" value="openstreetmap" class="mr-3 text-primary">
                                    <div>
                                        <span class="font-medium">OpenStreetMap</span>
                                        <p class="text-sm text-gray-500">官方主服务器</p>
                                    </div>
                                </label>
                            </div>
                        </div>
                        
                        <div id="download-controls">
                            <button id="start-download-btn" class="w-full bg-primary text-white font-medium py-3 px-6 rounded-lg flex items-center justify-center gap-2 btn-hover">
                                <i class="fas fa-download"></i>
                                <span>开始下载全国地图数据</span>
                            </button>
                            
                            <div id="download-progress-container" class="mt-6 hidden">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-gray-700">下载进度</span>
                                    <span id="download-percentage" class="text-sm font-medium text-primary">0%</span>
                                </div>
                                <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                                    <div id="download-progress-bar" class="h-full bg-primary rounded-full" style="width: 0%"></div>
                                </div>
                                <div class="flex justify-between mt-2 text-xs text-gray-500">
                                    <span id="download-size">0 MB / 2.8 GB</span>
                                    <span id="download-speed">0 MB/s</span>
                                </div>
                                <div class="mt-4 flex gap-3">
                                    <button id="pause-download-btn" class="flex-1 bg-gray-200 text-gray-700 py-2 rounded-lg btn-hover">
                                        <i class="fas fa-pause mr-1"></i> 暂停
                                    </button>
                                    <button id="cancel-download-btn" class="flex-1 bg-gray-200 text-gray-700 py-2 rounded-lg btn-hover">
                                        <i class="fas fa-times mr-1"></i> 取消
                                    </button>
                                </div>
                            </div>
                            
                            <div id="download-complete" class="mt-6 hidden">
                                <div class="bg-green-50 border border-green-200 rounded-lg p-4 flex items-start gap-3">
                                    <i class="fas fa-check-circle text-green-500 mt-0.5"></i>
                                    <div>
                                        <h4 class="font-medium text-green-800">下载完成</h4>
                                        <p class="text-sm text-green-700">文件已保存到: <span id="download-path" class="font-medium">/downloads/china-latest.osm.pbf</span></p>
                                        <button id="goto-process-btn" class="mt-3 text-primary text-sm font-medium hover:underline">
                                            前往预处理 <i class="fas fa-arrow-right ml-1"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 预处理区域 -->
        <section id="process" class="py-16 bg-neutral-light">
            <div class="container mx-auto px-4">
                <div class="max-w-4xl mx-auto">
                    <div class="text-center mb-12">
                        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral mb-4">PBF数据预处理</h2>
                        <p class="text-gray-600 max-w-2xl mx-auto">
                            将下载的PBF文件转换为高效的矢量瓦片格式，用于地图渲染
                        </p>
                    </div>
                    
                    <div class="bg-white rounded-xl p-6 md:p-8 card-shadow">
                        <div class="mb-6">
                            <h3 class="text-lg font-semibold mb-4">选择PBF文件</h3>
                            <label for="pbf-file-input" class="block border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-primary transition-colors">
                                <input type="file" id="pbf-file-input" accept=".osm.pbf,.pbf" class="hidden">
                                <div class="flex flex-col items-center">
                                    <i class="fas fa-file-import text-4xl text-gray-400 mb-3"></i>
                                    <p class="text-gray-600 mb-1">点击或拖放PBF文件到此处</p>
                                    <p class="text-xs text-gray-400">支持 .osm.pbf 格式文件</p>
                                </div>
                            </label>
                            
                            <div id="pbf-file-info" class="mt-4 hidden">
                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                    <div class="flex items-center">
                                        <i class="fas fa-file-code text-primary mr-3"></i>
                                        <div>
                                            <p id="pbf-file-name" class="font-medium text-gray-800">china-latest.osm.pbf</p>
                                            <p id="pbf-file-size" class="text-sm text-gray-500">2.8 GB</p>
                                        </div>
                                    </div>
                                    <button id="remove-file-btn" class="text-gray-400 hover:text-red-500 transition-colors">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <h3 class="text-lg font-semibold mb-4">预处理设置</h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">缩放级别范围</label>
                                    <div class="flex items-center gap-2">
                                        <input type="number" id="min-zoom" value="8" min="1" max="14" class="w-full p-2 border border-gray-300 rounded-lg">
                                        <span class="text-gray-500">-</span>
                                        <input type="number" id="max-zoom" value="16" min="2" max="18" class="w-full p-2 border border-gray-300 rounded-lg">
                                    </div>
                                    <p class="text-xs text-gray-500 mt-1">建议: 8-16 (数值越大细节越丰富，文件越大)</p>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">输出格式</label>
                                    <select id="output-format" class="w-full p-2 border border-gray-300 rounded-lg">
                                        <option value="mvt">Mapbox Vector Tiles (MVT)</option>
                                        <option value="mbtiles">MBTiles (包含多个MVT瓦片)</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="mt-4">
                                <label class="block text-sm font-medium text-gray-700 mb-1">包含的地图元素</label>
                                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
                                    <label class="flex items-center">
                                        <input type="checkbox" checked class="mr-2 text-primary">
                                        <span class="text-sm">道路与交通</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" checked class="mr-2 text-primary">
                                        <span class="text-sm">建筑物</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" checked class="mr-2 text-primary">
                                        <span class="text-sm">POI (兴趣点)</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" checked class="mr-2 text-primary">
                                        <span class="text-sm">水系</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" checked class="mr-2 text-primary">
                                        <span class="text-sm">土地利用</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" checked class="mr-2 text-primary">
                                        <span class="text-sm">行政边界</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <button id="start-process-btn" class="w-full bg-accent text-white font-medium py-3 px-6 rounded-lg flex items-center justify-center gap-2 btn-hover disabled:opacity-70 disabled:cursor-not-allowed" disabled>
                                <i class="fas fa-cogs"></i>
                                <span>开始预处理</span>
                            </button>
                            
                            <div id="process-progress-container" class="mt-6 hidden">
                                <div class="flex justify-between items-center mb-2">
                                    <span class="text-sm font-medium text-gray-700">处理进度</span>
                                    <span id="process-percentage" class="text-sm font-medium text-accent">0%</span>
                                </div>
                                <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                                    <div id="process-progress-bar" class="h-full bg-accent rounded-full" style="width: 0%"></div>
                                </div>
                                <div class="mt-3 text-sm text-gray-600">
                                    <p id="process-status">准备开始处理...</p>
                                </div>
                                <div class="mt-4 flex gap-3">
                                    <button id="pause-process-btn" class="flex-1 bg-gray-200 text-gray-700 py-2 rounded-lg btn-hover">
                                        <i class="fas fa-pause mr-1"></i> 暂停
                                    </button>
                                    <button id="cancel-process-btn" class="flex-1 bg-gray-200 text-gray-700 py-2 rounded-lg btn-hover">
                                        <i class="fas fa-times mr-1"></i> 取消
                                    </button>
                                </div>
                            </div>
                            
                            <div id="process-complete" class="mt-6 hidden">
                                <div class="bg-green-50 border border-green-200 rounded-lg p-4 flex items-start gap-3">
                                    <i class="fas fa-check-circle text-green-500 mt-0.5"></i>
                                    <div>
                                        <h4 class="font-medium text-green-800">预处理完成</h4>
                                        <p class="text-sm text-green-700">已生成矢量瓦片文件，可用于地图渲染</p>
                                        <div class="mt-3 flex gap-3">
                                            <button id="download-tiles-btn" class="bg-green-600 text-white py-2 px-4 rounded-lg text-sm btn-hover">
                                                <i class="fas fa-download mr-1"></i> 下载瓦片文件
                                            </button>
                                            <button id="goto-preview-btn" class="bg-primary text-white py-2 px-4 rounded-lg text-sm btn-hover">
                                                <i class="fas fa-map mr-1"></i> 预览地图
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 地图预览区域 -->
        <section id="preview" class="py-16 bg-white">
            <div class="container mx-auto px-4">
                <div class="max-w-6xl mx-auto">
                    <div class="text-center mb-12">
                        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral mb-4">地图预览</h2>
                        <p class="text-gray-600 max-w-2xl mx-auto">
                            查看预处理后的矢量瓦片地图效果
                        </p>
                    </div>
                    
                    <div class="bg-neutral-light rounded-xl overflow-hidden card-shadow">
                        <div class="h-[500px] relative">
                            <div id="map-preview-container" class="w-full h-full"></div>
                            <div id="map-placeholder" class="absolute inset-0 flex flex-col items-center justify-center text-gray-500">
                                <i class="fas fa-map text-5xl mb-4 opacity-30"></i>
                                <p>请先完成地图数据预处理，然后在此处预览地图</p>
                            </div>
                        </div>
                        
                        <div class="p-4 border-t border-gray-200 bg-white">
                            <div class="flex flex-wrap gap-3">
                                <button id="load-preview-btn" class="bg-primary text-white py-2 px-4 rounded-lg text-sm btn-hover disabled:opacity-70 disabled:cursor-not-allowed" disabled>
                                    <i class="fas fa-eye mr-1"></i> 加载预览
                                </button>
                                <button class="bg-gray-200 text-gray-700 py-2 px-4 rounded-lg text-sm btn-hover">
                                    <i class="fas fa-street-view mr-1"></i> 切换到3D视图
                                </button>
                                <button class="bg-gray-200 text-gray-700 py-2 px-4 rounded-lg text-sm btn-hover">
                                    <i class="fas fa-layer-group mr-1"></i> 图层控制
                                </button>
                                <button class="bg-gray-200 text-gray-700 py-2 px-4 rounded-lg text-sm btn-hover">
                                    <i class="fas fa-paint-brush mr-1"></i> 切换样式
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 使用指南区域 -->
        <section id="guide" class="py-16 bg-neutral-light">
            <div class="container mx-auto px-4">
                <div class="max-w-4xl mx-auto">
                    <div class="text-center mb-12">
                        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral mb-4">使用指南</h2>
                        <p class="text-gray-600 max-w-2xl mx-auto">
                            详细了解如何下载、处理和使用离线地图数据
                        </p>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="bg-white rounded-xl p-6 card-shadow">
                            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                                <i class="fas fa-download text-primary text-xl"></i>
                            </div>
                            <h3 class="text-lg font-semibold mb-3">下载地图数据</h3>
                            <ol class="space-y-2 text-gray-600 text-sm">
                                <li class="flex items-start">
                                    <span class="bg-primary/10 text-primary rounded-full w-5 h-5 flex items-center justify-center mr-2 mt-0.5 flex-shrink-0">1</span>
                                    <span>选择下载源，点击"开始下载全国地图数据"</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="bg-primary/10 text-primary rounded-full w-5 h-5 flex items-center justify-center mr-2 mt-0.5 flex-shrink-0">2</span>
                                    <span>等待下载完成（约2.8GB，时间取决于网络速度）</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="bg-primary/10 text-primary rounded-full w-5 h-5 flex items-center justify-center mr-2 mt-0.5 flex-shrink-0">3</span>
                                    <span>记录下载文件的保存路径</span>
                                </li>
                            </ol>
                        </div>
                        
                        <div class="bg-white rounded-xl p-6 card-shadow">
                            <div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center mb-4">
                                <i class="fas fa-cogs text-accent text-xl"></i>
                            </div>
                            <h3 class="text-lg font-semibold mb-3">预处理数据</h3>
                            <ol class="space-y-2 text-gray-600 text-sm">
                                <li class="flex items-start">
                                    <span class="bg-accent/10 text-accent rounded-full w-5 h-5 flex items-center justify-center mr-2 mt-0.5 flex-shrink-0">1</span>
                                    <span>上传下载好的PBF文件</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="bg-accent/10 text-accent rounded-full w-5 h-5 flex items-center justify-center mr-2 mt-0.5 flex-shrink-0">2</span>
                                    <span>设置合适的缩放级别范围和其他选项</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="bg-accent/10 text-accent rounded-full w-5 h-5 flex items-center justify-center mr-2 mt-0.5 flex-shrink-0">3</span>
                                    <span>点击"开始预处理"，等待处理完成</span>
                                </li>
                            </ol>
                        </div>
                        
                        <div class="bg-white rounded-xl p-6 card-shadow">
                            <div class="w-12 h-12 bg-secondary/10 rounded-full flex items-center justify-center mb-4">
                                <i class="fas fa-map-marked text-secondary text-xl"></i>
                            </div>
                            <h3 class="text-lg font-semibold mb-3">使用离线地图</h3>
                            <ol class="space-y-2 text-gray-600 text-sm">
                                <li class="flex items-start">
                                    <span class="bg-secondary/10 text-secondary rounded-full w-5 h-5 flex items-center justify-center mr-2 mt-0.5 flex-shrink-0">1</span>
                                    <span>在预览区域查看处理后的地图效果</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="bg-secondary/10 text-secondary rounded-full w-5 h-5 flex items-center justify-center mr-2 mt-0.5 flex-shrink-0">2</span>
                                    <span>下载矢量瓦片文件用于离线应用开发</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="bg-secondary/10 text-secondary rounded-full w-5 h-5 flex items-center justify-center mr-2 mt-0.5 flex-shrink-0">3</span>
                                    <span>集成到支持MVT格式的地图库中使用</span>
                                </li>
                            </ol>
                        </div>
                    </div>
                    
                    <div class="mt-10 bg-white rounded-xl p-6 card-shadow">
                        <h3 class="text-lg font-semibold mb-4">常见问题</h3>
                        <div class="space-y-4">
                            <div>
                                <h4 class="font-medium text-gray-800 mb-1">下载速度很慢怎么办？</h4>
                                <p class="text-sm text-gray-600">尝试切换不同的下载源，或在网络环境较好的时间段下载。由于文件较大（约2.8GB），完整下载可能需要较长时间。</p>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800 mb-1">预处理需要多长时间？</h4>
                                <p class="text-sm text-gray-600">预处理时间取决于您的电脑性能和设置的缩放级别范围，处理全国数据可能需要30分钟到数小时不等。</p>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800 mb-1">生成的矢量瓦片有多大？</h4>
                                <p class="text-sm text-gray-600">根据设置的缩放级别不同，生成的瓦片大小差异较大，8-16级缩放通常会生成10-50GB的瓦片数据。</p>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800 mb-1">哪些地图库支持这些矢量瓦片？</h4>
                                <p class="text-sm text-gray-600">MapLibre GL JS、Mapbox GL JS、OpenLayers等现代地图库都支持MVT格式的矢量瓦片。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-neutral text-white py-10">
        <div class="container mx-auto px-4">
            <div class="max-w-6xl mx-auto">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <div>
                        <div class="flex items-center space-x-2 mb-4">
                            <i class="fas fa-map-marked-alt text-secondary text-xl"></i>
                            <h3 class="text-lg font-bold">离线地图中心</h3>
                        </div>
                        <p class="text-gray-400 text-sm">
                            提供完整的离线地图解决方案，包括数据下载、预处理和应用指南
                        </p>
                    </div>
                    
                    <div>
                        <h4 class="font-semibold mb-4">快速链接</h4>
                        <ul class="space-y-2 text-gray-400 text-sm">
                            <li><a href="#download" class="hover:text-secondary transition-colors">下载地图</a></li>
                            <li><a href="#process" class="hover:text-secondary transition-colors">数据预处理</a></li>
                            <li><a href="#preview" class="hover:text-secondary transition-colors">地图预览</a></li>
                            <li><a href="#guide" class="hover:text-secondary transition-colors">使用指南</a></li>
                        </ul>
                    </div>
                    
                    <div>
                        <h4 class="font-semibold mb-4">资源</h4>
                        <ul class="space-y-2 text-gray-400 text-sm">
                            <li><a href="https://www.openstreetmap.org" target="_blank" class="hover:text-secondary transition-colors">OpenStreetMap</a></li>
                            <li><a href="https://download.geofabrik.de/" target="_blank" class="hover:text-secondary transition-colors">Geofabrik下载源</a></li>
                            <li><a href="https://github.com/maplibre/maplibre-gl-js" target="_blank" class="hover:text-secondary transition-colors">MapLibre GL JS</a></li>
                            <li><a href="https://github.com/mapbox/tippecanoe" target="_blank" class="hover:text-secondary transition-colors">Tippecanoe工具</a></li>
                        </ul>
                    </div>
                    
                    <div>
                        <h4 class="font-semibold mb-4">联系我们</h4>
                        <ul class="space-y-2 text-gray-400 text-sm">
                            <li class="flex items-center">
                                <i class="fas fa-envelope text-secondary mr-2"></i>
                                <a href="mailto:info@offlinemap.example" class="hover:text-secondary transition-colors">info@offlinemap.example</a>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-github text-secondary mr-2"></i>
                                <a href="https://github.com" target="_blank" class="hover:text-secondary transition-colors">GitHub</a>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-500 text-sm">
                    <p>&copy; 2023 离线地图中心 | 数据来源于 <a href="https://www.openstreetmap.org" target="_blank" class="text-secondary hover:underline">OpenStreetMap</a></p>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化变量
            let downloadInterval;
            let processInterval;
            let mapPreview = null;
            let isDownloading = false;
            let isPaused = false;
            
            // 下载相关元素
            const startDownloadBtn = document.getElementById('start-download-btn');
            const downloadProgressContainer = document.getElementById('download-progress-container');
            const downloadProgressBar = document.getElementById('download-progress-bar');
            const downloadPercentage = document.getElementById('download-percentage');
            const downloadSize = document.getElementById('download-size');
            const downloadSpeed = document.getElementById('download-speed');
            const pauseDownloadBtn = document.getElementById('pause-download-btn');
            const cancelDownloadBtn = document.getElementById('cancel-download-btn');
            const downloadComplete = document.getElementById('download-complete');
            const gotoProcessBtn = document.getElementById('goto-process-btn');
            const downloadPath = document.getElementById('download-path');
            
            // 预处理相关元素
            const pbfFileInput = document.getElementById('pbf-file-input');
            const pbfFileInfo = document.getElementById('pbf-file-info');
            const pbfFileName = document.getElementById('pbf-file-name');
            const pbfFileSize = document.getElementById('pbf-file-size');
            const removeFileBtn = document.getElementById('remove-file-btn');
            const startProcessBtn = document.getElementById('start-process-btn');
            const processProgressContainer = document.getElementById('process-progress-container');
            const processProgressBar = document.getElementById('process-progress-bar');
            const processPercentage = document.getElementById('process-percentage');
            const processStatus = document.getElementById('process-status');
            const pauseProcessBtn = document.getElementById('pause-process-btn');
            const cancelProcessBtn = document.getElementById('cancel-process-btn');
            const processComplete = document.getElementById('process-complete');
            const downloadTilesBtn = document.getElementById('download-tiles-btn');
            const gotoPreviewBtn = document.getElementById('goto-preview-btn');
            
            // 预览相关元素
            const loadPreviewBtn = document.getElementById('load-preview-btn');
            const mapPlaceholder = document.getElementById('map-placeholder');
            
            // 开始下载按钮点击事件 - 调用后端API
            startDownloadBtn.addEventListener('click', async function() {
                // 获取选中的下载源
                const selectedSource = document.querySelector('input[name="download-source"]:checked').value;
                
                try {
                    // 调用后端下载接口
                    const response = await fetch('/api/download/pbf', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ source: selectedSource })
                    });
                    
                    const result = await response.json();
                    
                    if (response.ok) {
                        // 隐藏开始按钮，显示进度条
                        startDownloadBtn.classList.add('hidden');
                        downloadProgressContainer.classList.remove('hidden');
                        isDownloading = true;
                        isPaused = false;
                        
                        // 开始轮询获取下载进度
                        startDownloadProgressPolling();
                    } else {
                        alert(`下载启动失败: ${result.message || '未知错误'}`);
                    }
                } catch (error) {
                    console.error('下载请求失败:', error);
                    alert('无法连接到服务器，请稍后重试');
                }
            });
            
            // 暂停/继续下载
            pauseDownloadBtn.addEventListener('click', async function() {
                if (isPaused) {
                    // 继续下载
                    try {
                        const response = await fetch('/api/download/resume', { method: 'POST' });
                        if (response.ok) {
                            isPaused = false;
                            pauseDownloadBtn.innerHTML = '<i class="fas fa-pause mr-1"></i> 暂停';
                            startDownloadProgressPolling();
                        }
                    } catch (error) {
                        console.error('继续下载失败:', error);
                    }
                } else {
                    // 暂停下载
                    try {
                        const response = await fetch('/api/download/pause', { method: 'POST' });
                        if (response.ok) {
                            isPaused = true;
                            pauseDownloadBtn.innerHTML = '<i class="fas fa-play mr-1"></i> 继续';
                            clearInterval(downloadInterval);
                        }
                    } catch (error) {
                        console.error('暂停下载失败:', error);
                    }
                }
            });
            
            // 取消下载
            cancelDownloadBtn.addEventListener('click', async function() {
                if (confirm('确定要取消下载吗？已下载的部分将被删除。')) {
                    try {
                        const response = await fetch('/api/download/cancel', { method: 'POST' });
                        
                        // 无论服务器响应如何，都更新UI
                        clearInterval(downloadInterval);
                        downloadProgressContainer.classList.add('hidden');
                        startDownloadBtn.classList.remove('hidden');
                        isDownloading = false;
                        isPaused = false;
                        
                        // 重置进度
                        downloadProgressBar.style.width = '0%';
                        downloadPercentage.textContent = '0%';
                        downloadSize.textContent = '0 MB / 2.8 GB';
                        downloadSpeed.textContent = '0 MB/s';
                    } catch (error) {
                        console.error('取消下载失败:', error);
                    }
                }
            });
            
            // 轮询获取下载进度
            function startDownloadProgressPolling() {
                // 清除可能存在的旧定时器
                clearInterval(downloadInterval);
                
                // 每秒查询一次进度
                downloadInterval = setInterval(async function() {
                    try {
                        const response = await fetch('/api/download/progress');
                        const progress = await response.json();
                        
                        // 更新进度显示
                        downloadProgressBar.style.width = `${progress.percentage}%`;
                        downloadPercentage.textContent = `${Math.round(progress.percentage)}%`;
                        
                        // 更新下载大小显示
                        if (progress.total_size) {
                            const downloadedMB = (progress.downloaded_size / (1024 * 1024)).toFixed(0);
                            const totalMB = (progress.total_size / (1024 * 1024)).toFixed(0);
                            downloadSize.textContent = `${downloadedMB} MB / ${totalMB} MB`;
                        }
                        
                        // 更新下载速度
                        if (progress.speed) {
                            const speedMB = (progress.speed / (1024 * 1024)).toFixed(1);
                            downloadSpeed.textContent = `${speedMB} MB/s`;
                        }
                        
                        // 检查是否下载完成
                        if (progress.completed) {
                            clearInterval(downloadInterval);
                            downloadProgressContainer.classList.add('hidden');
                            downloadComplete.classList.remove('hidden');
                            isDownloading = false;
                            
                            // 更新下载路径显示
                            if (progress.file_path) {
                                downloadPath.textContent = progress.file_path;
                            }
                            
                            // 自动填充预处理的文件信息
                            pbfFileName.textContent = progress.file_name || 'china-latest.osm.pbf';
                            pbfFileSize.textContent = formatFileSize(progress.total_size || 2800 * 1024 * 1024);
                            pbfFileInfo.classList.remove('hidden');
                            startProcessBtn.disabled = false;
                        }
                        
                        // 检查是否下载失败
                        if (progress.error) {
                            clearInterval(downloadInterval);
                            alert(`下载失败: ${progress.error}`);
                            downloadProgressContainer.classList.add('hidden');
                            startDownloadBtn.classList.remove('hidden');
                            isDownloading = false;
                        }
                    } catch (error) {
                        console.error('获取下载进度失败:', error);
                        // 如果连续失败，可能是连接中断，停止轮询
                        clearInterval(downloadInterval);
                    }
                }, 1000);
            }
            
            // 前往预处理
            gotoProcessBtn.addEventListener('click', function() {
                document.getElementById('process').scrollIntoView({ behavior: 'smooth' });
            });
            
            // 处理文件选择
            pbfFileInput.addEventListener('change', function(e) {
                if (e.target.files && e.target.files[0]) {
                    const file = e.target.files[0];
                    pbfFileName.textContent = file.name;
                    pbfFileSize.textContent = formatFileSize(file.size);
                    pbfFileInfo.classList.remove('hidden');
                    startProcessBtn.disabled = false;
                }
            });
            
            // 移除文件
            removeFileBtn.addEventListener('click', function() {
                pbfFileInput.value = '';
                pbfFileInfo.classList.add('hidden');
                startProcessBtn.disabled = true;
            });
            
            // 开始预处理
            startProcessBtn.addEventListener('click', async function() {
                // 创建表单数据
                const formData = new FormData();
                
                // 添加文件（如果有上传的话）
                if (pbfFileInput.files && pbfFileInput.files[0]) {
                    formData.append('pbf_file', pbfFileInput.files[0]);
                } else {
                    // 使用下载的文件路径
                    formData.append('pbf_file_path', downloadPath.textContent);
                }
                
                // 添加缩放级别
                formData.append('min_zoom', document.getElementById('min-zoom').value);
                formData.append('max_zoom', document.getElementById('max-zoom').value);
                
                // 添加地图元素选项
                formData.append('include_roads', document.querySelector('input[type="checkbox"][name="include_roads"]').checked);
                formData.append('include_buildings', document.querySelector('input[type="checkbox"][name="include_buildings"]').checked);
                formData.append('include_poi', document.querySelector('input[type="checkbox"][name="include_poi"]').checked);
                formData.append('include_water', document.querySelector('input[type="checkbox"][name="include_water"]').checked);
                formData.append('include_landuse', document.querySelector('input[type="checkbox"][name="include_landuse"]').checked);
                formData.append('include_boundaries', document.querySelector('input[type="checkbox"][name="include_boundaries"]').checked);
                
                try {
                    // 调用预处理API
                    const response = await fetch('/api/process/convert', {
                        method: 'POST',
                        body: formData
                    });
                    
                    const result = await response.json();
                    
                    if (response.ok) {
                        // 隐藏开始按钮，显示进度条
                        startProcessBtn.classList.add('hidden');
                        processProgressContainer.classList.remove('hidden');
                        
                        // 开始轮询获取处理进度
                        startProcessProgressPolling();
                    } else {
                        alert(`预处理启动失败: ${result.message || '未知错误'}`);
                    }
                } catch (error) {
                    console.error('预处理请求失败:', error);
                    alert('无法连接到服务器，请稍后重试');
                }
            });
            
            // 轮询获取处理进度
            function startProcessProgressPolling() {
                // 清除可能存在的旧定时器
                clearInterval(processInterval);
                
                // 每秒查询一次进度
                processInterval = setInterval(async function() {
                    try {
                        const response = await fetch('/api/process/progress');
                        const progress = await response.json();
                        
                        // 更新进度显示
                        processProgressBar.style.width = `${progress.percentage}%`;
                        processPercentage.textContent = `${Math.round(progress.percentage)}%`;
                        processStatus.textContent = progress.status || '处理中...';
                        
                        // 检查是否处理完成
                        if (progress.completed) {
                            clearInterval(processInterval);
                            processProgressContainer.classList.add('hidden');
                            processComplete.classList.remove('hidden');
                            loadPreviewBtn.disabled = false;
                        }
                        
                        // 检查是否处理失败
                        if (progress.error) {
                            clearInterval(processInterval);
                            alert(`处理失败: ${progress.error}`);
                            processProgressContainer.classList.add('hidden');
                            startProcessBtn.classList.remove('hidden');
                        }
                    } catch (error) {
                        console.error('获取处理进度失败:', error);
                    }
                }, 1000);
            }
            
            // 暂停预处理
            pauseProcessBtn.addEventListener('click', async function() {
                try {
                    const response = await fetch('/api/process/pause', { method: 'POST' });
                    if (response.ok) {
                        const currentText = pauseProcessBtn.innerHTML;
                        if (currentText.includes('暂停')) {
                            pauseProcessBtn.innerHTML = '<i class="fas fa-play mr-1"></i> 继续';
                            clearInterval(processInterval);
                        } else {
                            pauseProcessBtn.innerHTML = '<i class="fas fa-pause mr-1"></i> 暂停';
                            startProcessProgressPolling();
                        }
                    }
                } catch (error) {
                    console.error('暂停处理失败:', error);
                }
            });
            
            // 取消预处理
            cancelProcessBtn.addEventListener('click', async function() {
                if (confirm('确定要取消预处理吗？已处理的部分将被删除。')) {
                    try {
                        const response = await fetch('/api/process/cancel', { method: 'POST' });
                        
                        // 无论服务器响应如何，都更新UI
                        clearInterval(processInterval);
                        processProgressContainer.classList.add('hidden');
                        startProcessBtn.classList.remove('hidden');
                    } catch (error) {
                        console.error('取消处理失败:', error);
                    }
                }
            });
            
            // 前往预览
            gotoPreviewBtn.addEventListener('click', function() {
                document.getElementById('preview').scrollIntoView({ behavior: 'smooth' });
            });
            
            // 加载预览
            loadPreviewBtn.addEventListener('click', function() {
                if (!mapPreview) {
                    // 初始化地图预览
                    mapPlaceholder.classList.add('hidden');
                    
                    mapPreview = new maplibregl.Map({
                        container: 'map-preview-container',
                        style: {
                            "version": 8,
                            "name": "Offline Map Preview",
                            "sources": {
                                "osm-tiles": {
                                    "type": "vector",
                                    // 指向本地瓦片服务
                                    "tiles": ["/tiles/{z}/{x}/{y}.mvt"],
                                    "minzoom": 8,
                                    "maxzoom": 16
                                }
                            },
                            "layers": [
                                // 背景层
                                {
                                    "id": "background",
                                    "type": "background",
                                    "paint": {
                                        "background-color": "#f8f9fa"
                                    }
                                },
                                // 土地利用层
                                {
                                    "id": "landuse",
                                    "type": "fill",
                                    "source": "osm-tiles",
                                    "source-layer": "landuse",
                                    "paint": {
                                        "fill-color": [
                                            "match",
                                            ["get", "class"],
                                            "park", "#e8f5e9",
                                            "water", "#e3f2fd",
                                            "residential", "#ffffff",
                                            "commercial", "#fff8e1",
                                            "#f5f5f5"
                                        ],
                                        "fill-opacity": 0.8
                                    }
                                },
                                // 道路层
                                {
                                    "id": "roads",
                                    "type": "line",
                                    "source": "osm-tiles",
                                    "source-layer": "transportation",
                                    "paint": {
                                        "line-color": [
                                            "match",
                                            ["get", "class"],
                                            "motorway", "#e53935",
                                            "trunk", "#f4511e",
                                            "primary", "#ffb300",
                                            "secondary", "#43a047",
                                            "tertiary", "#00acc1",
                                            "residential", "#7cb342",
                                            "#9e9e9e"
                                        ],
                                        "line-width": [
                                            "match",
                                            ["get", "class"],
                                            "motorway", 4,
                                            "trunk", 3.5,
                                            "primary", 3,
                                            "secondary", 2.5,
                                            "tertiary", 2,
                                            1.5
                                        ]
                                    }
                                },
                                // 建筑物层
                                {
                                    "id": "buildings",
                                    "type": "fill",
                                    "source": "osm-tiles",
                                    "source-layer": "building",
                                    "paint": {
                                        "fill-color": "#e0e0e0",
                                        "fill-outline-color": "#bdbdbd"
                                    }
                                }
                            ]
                        },
                        center: [104.0665, 30.6592], // 中国中心坐标
                        zoom: 4
                    });
                    
                    // 添加地图控件
                    mapPreview.addControl(new maplibregl.NavigationControl(), 'top-right');
                }
            });
            
            // 辅助函数：格式化文件大小
            function formatFileSize(bytes) {
                if (bytes < 1024) return bytes + ' B';
                else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
                else if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB';
                else return (bytes / 1073741824).toFixed(1) + ' GB';
            }
            
            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                });
            });
        });
    </script>
</body>
</html>
